<template>
  <smart-table
    :title="courseNodeTitle"
    :formList="courseNodeFormList"
    :selectUrl="courseNodeSelectUrl"
    :insertUrl="courseNodeInsertUrl"
    :updateUrl="courseNodeUpdateUrl"
    :deleteUrl="courseNodeDeleteUrl"
    :exportExcelUrl="courseNodeExportUrl"
    :importExcelUrl="courseNodeImportUrl"
    :tableColumns="courseNodeTableColumns"
    :formButtonCtl="courseNodeFormButtonCtl"
    :formRules="courseNodeFormRules"
    :insertUpdateMethodExtend="addCourseId"
    :selectMethodExtend="addCourseId"
    :maxOptionButtonCount="6"
    fileIndex="video">
    <template slot="table-button" slot-scope="row">
      <el-button type="primary" icon="el-icon-view" @click="view(row.row)">预览视频</el-button>
    </template>
    <template slot="dialog-custom-form">
      <el-dialog title="视频" :visible.sync="viewDialogVisible" width="50%" @opened="initComponent" @close="closeDialog" center>
        <meta-preview :metaData="fileObj" ref="metaPreview" />
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDialog()">关闭</el-button>
        </span>
      </el-dialog>
    </template>
  </smart-table>
</template>

<script>
import { mapGetters } from 'vuex'
import MetaPreview from '@/components/MetaPreview'
export default {
  computed: {
    ...mapGetters(['id']),
  },
  components: {
    MetaPreview,
  },
  data() {
    return {
      //主题
      courseNodeTitle: '课节',
      //表单列表
      courseNodeFormList: [
        {
          title: '标题',
          name: 'title',
          type: 'input',
          width: 80,
        },
        {
          title: '排序',
          name: 'sort',
          type: 'number',
          numberRange: {
            min: 1,
          },
          hidden: {
            header: true,
          },
        },
        {
          title: '视频',
          name: 'video',
          type: 'file',
          width: 80,
          hidden: {
            header: true,
          },
        },
      ],
      //课节查询路径
      courseNodeSelectUrl: 'courseNode/lookNode',
      //课节新增路径
      courseNodeInsertUrl: 'courseNode/addOneCourseNode',
      //课节更新路径
      courseNodeUpdateUrl: 'courseNode/updateOneCourseNode',
      //课节删除路径
      courseNodeDeleteUrl: 'courseNode/deleteCourseNodes',
      //课节导出路径
      courseNodeExportUrl: '/courseService/courseNode/export',
      //课节导入名称
      courseNodeImportUrl: '/courseService/courseNode/import',
      //表格列
      courseNodeTableColumns: [
        {
          title: '标题',
          name: 'title',
        },
        {
          title: '排序',
          name: 'sort',
        },
        {
          title: '创建时间',
          name: 'createTime',
          width: 180,
        },
        {
          title: '修改时间',
          name: 'updateTime',
          width: 180,
        },
      ],
      //表单按钮控制
      courseNodeFormButtonCtl: {
        detailButton: false,
      },
      //表单校验
      courseNodeFormRules: {
        title: [
          {
            required: true,
            message: '标题不得为空!',
            trigger: 'blur',
          },
        ],
        subjectId: [
          {
            required: true,
            message: '科目不得为空!',
            trigger: 'change',
          },
        ],
        sort: [
          {
            required: true,
            message: '排序不得为空!',
            trigger: 'change',
          },
          {
            type: 'number',
            message: '课次必须为数字!',
            trigger: 'change',
          },
        ],
      },
      //当前课程id
      courseId: 0,
      //弹窗显示
      viewDialogVisible: false,
      //当前文件对象
      fileObj: {
        id: 0,
        //文件分类
        fileCategory: 1,
      },
    }
  },
  mounted() {
    this.courseId = this.$route.query.courseId
    if (this.courseId == undefined) {
      this.$router.push({
        name: 'Course',
      })
    }
  },
  created() {},
  methods: {
    addCourseId(data) {
      if (data == undefined) {
        data = {}
      }
      data.courseId = this.$route.query.courseId
      data.userId = this.id
      return data
    },
    //初始化组件
    initComponent() {
      this.$refs.metaPreview.init()
    },
    //预览
    view(data) {
      this.fileObj = { id: data.video, fileCategory: 1 }
      this.viewDialogVisible = true
    },
    // 离开页面销毁
    closeDialog() {
      this.$refs.metaPreview.pause()
      this.viewDialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped></style>
